<script setup>
import { reactive, onMounted, watch, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getVideo } from '../../api/home'
const route = useRoute()
const data = reactive({
    videoList: [],
    list: []
})
function isUndefined(value) {
    return typeof value === 'undefined';
}
let id = route.query.videoType
if (isUndefined(id)) {
    id = 0;
}
var flag = ref(0)
console.log(id);

watch(route, (to, from) => {
    //执行重新加载数据
    id = Number(route.query.videoType)
    getVideo(id).then(
        (res) => {
            console.log(res.data.data.feeds);
            data.videoList = res.data.data.feeds
            flag = 1
            console.log(flag);
        })
})

onMounted(() => {
    getVideo(id).then(
        (res) => {
            console.log("视频列表", res.data.data.feeds);
            data.videoList = res.data.data.feeds;
            flag = 1
            console.log(flag);
        })
})

</script>

<template>
    <div class="videos">
        <div class="video-item" v-for="item in data.videoList" :key="item" color="#f03d37">
            <a :href="item.video.url">
                <img :src="item.video.imgUrl" alt="">
                <div class="video-title">{{ item.shareInfo.title }}</div>
                <img src="https://obj.pipi.cn/festatic/common/image/2a192bd00ce15cbcf0cd1e157052887e.png" alt=""
                    class="play">
                <div class="video-time">{{ item.video.dur }}</div>
            </a>
            <div class="video-info">
                <div class="video-info-user">
                    <img :src="item.user.avatarurl" alt="">
                    <div>{{ item.user.nickName }}</div>
                </div>
                <div class="video-info-count">
                    <div class="video-info-upCount">
                        <img src="https://obj.pipi.cn/festatic/asgard/resources/images/media/video-praise.png" alt="">
                        <div>{{ item.upCount }}</div>
                    </div>
                    <div class="video-info-commentCount">
                        <img src="https://obj.pipi.cn/festatic/asgard/resources/images/media/video-comment.png" alt="">
                        <div>{{ item.commentCount }}</div>
                    </div>
                    <div class="video-info-share">
                        <img src="https://obj.pipi.cn/festatic/asgard/resources/images/media/video-share.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="blank"></div>
</template>
<style lang="scss" scoped>
.video-item {
    width: 375px;
    position: relative;

    img {
        width: 100%;
        height: 100%;
    }

    .video-title {
        position: absolute;
        top: 0px;
        left: 0px;
        font-family: PingFangSC-Medium, serif;
        color: #fff;
        font-size: 18px;
        margin: 15px;
        font-weight: 500;
    }

    .play {
        position: absolute;
        width: 58px;
        height: 58px;
        top: 30%;
        right: 158px;
    }

    .video-time {
        position: absolute;
        top: 70%;
        right: 2%;
        color: #fff;
    }
}

.video-info {
    color: #666;
    display: flex;
    height: 46px;
    padding-left: 10px;
    justify-content: space-between;

    .video-info-user {
        font-size: 15px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            margin-right: 5px;
        }
    }

    .video-info-count {
        font-size: 13px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 162px;

        .video-info-upCount {
            display: flex;

            img {
                width: 18px;
                height: 18px;
                margin-right: 5px;
            }
        }

        .video-info-commentCount {
            display: flex;

            img {
                width: 18px;
                height: 18px;
                margin-right: 5px;
            }
        }

        .video-info-share {
            img {
                width: 18px;
                height: 18px;
                margin-right: 5px;
            }
        }
    }
}

.blank {
    width: 100%;
    height: 50px;
}
</style>